{% extends 'base.html' %}

{% block title %}{{ contract.name }} - 合同详情 - 固定资产管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
                <li class="breadcrumb-item"><a href="{% url 'assets:contract_list' %}">合同管理</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ contract.name }}</li>
            </ol>
        </nav>
        
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2><i class="fas fa-file-contract me-2"></i>{{ contract.name }}</h2>
            <div class="btn-group">
                <a href="{% url 'assets:contract_update' contract.pk %}" class="btn btn-primary">
                    <i class="fas fa-edit me-1"></i>编辑合同
                </a>
                <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                    <span class="visually-hidden">更多操作</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" onclick="submitForReview({{ contract.pk }})">
                        <i class="fas fa-paper-plane me-2"></i>提交审核
                    </a></li>
                    <li><a class="dropdown-item" href="#" onclick="printContract({{ contract.pk }})">
                        <i class="fas fa-print me-2"></i>打印合同
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="{% url 'assets:asset_list' %}?contract={{ contract.pk }}">
                        <i class="fas fa-cube me-2"></i>查看合同资产
                    </a></li>
                    <li><a class="dropdown-item" href="{% url 'assets:supplier_detail' contract.supplier.pk %}">
                        <i class="fas fa-truck me-2"></i>查看供应商
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="{% url 'assets:contract_list' %}">
                        <i class="fas fa-arrow-left me-2"></i>返回列表
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="{% url 'assets:contract_delete' contract.pk %}" data-confirm="确定要删除合同 {{ contract.name }} 吗？">
                        <i class="fas fa-trash me-2"></i>删除合同
                    </a></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <!-- 基本信息 -->
            <div class="col-md-8">
                <!-- 合同基本信息 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>合同基本信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td width="30%" class="text-muted">合同名称:</td>
                                        <td><strong>{{ contract.name }}</strong></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">合同编号:</td>
                                        <td><code>{{ contract.contract_number }}</code></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">合同类型:</td>
                                        <td>
                                            <span class="badge bg-info">{{ contract.get_contract_type_display }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">关联供应商:</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-truck me-1 text-primary"></i>
                                                <a href="{% url 'assets:supplier_detail' contract.supplier.pk %}" class="text-decoration-none">
                                                    {{ contract.supplier.name }}
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td width="30%" class="text-muted">合同状态:</td>
                                        <td>
                                            {% if contract.status == 'draft' %}
                                                <span class="badge bg-secondary">
                                                    <i class="fas fa-edit me-1"></i>草稿
                                                </span>
                                            {% elif contract.status == 'active' %}
                                                <span class="badge bg-success">
                                                    <i class="fas fa-check me-1"></i>生效中
                                                </span>
                                            {% elif contract.status == 'expired' %}
                                                <span class="badge bg-warning">
                                                    <i class="fas fa-clock me-1"></i>已过期
                                                </span>
                                            {% elif contract.status == 'terminated' %}
                                                <span class="badge bg-danger">
                                                    <i class="fas fa-times me-1"></i>已终止
                                                </span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">合同金额:</td>
                                        <td>
                                            <span class="text-success fw-bold">¥{{ contract.amount|floatformat:2 }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">创建人:</td>
                                        <td>
                                            {% if contract.created_by %}
                                                <i class="fas fa-user me-1 text-info"></i>{{ contract.created_by.get_full_name|default:contract.created_by.username }}
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">审核人:</td>
                                        <td>
                                            {% if contract.reviewed_by %}
                                                <i class="fas fa-user-check me-1 text-success"></i>{{ contract.reviewed_by.get_full_name|default:contract.reviewed_by.username }}
                                            {% else %}
                                                <span class="text-muted">待审核</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 合同期限与金额 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-calendar-alt me-2"></i>合同期限与金额
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td width="30%" class="text-muted">签订日期:</td>
                                        <td>
                                            {% if contract.signed_date %}
                                                <i class="fas fa-pen me-1 text-primary"></i>{{ contract.signed_date|date:"Y-m-d" }}
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">生效日期:</td>
                                        <td>
                                            {% if contract.effective_date %}
                                                <i class="fas fa-play me-1 text-success"></i>{{ contract.effective_date|date:"Y-m-d" }}
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <td width="30%" class="text-muted">开始日期:</td>
                                        <td>
                                            <i class="fas fa-calendar-alt me-1 text-success"></i>{{ contract.start_date|date:"Y-m-d" }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">到期日期:</td>
                                        <td>
                                            <i class="fas fa-calendar-times me-1 text-danger"></i>{{ contract.end_date|date:"Y-m-d" }}
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        
                        <!-- 合同进度条 -->
                        {% if contract.status == 'active' %}
                        <div class="mt-3">
                            <h6 class="text-muted mb-2">合同执行进度</h6>
                            <div class="progress mb-2">
                                {% with total_days=contract.start_date|timeuntil:contract.end_date %}
                                {% with elapsed_days=contract.start_date|timesince %}
                                <div class="progress-bar bg-success" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">45%</div>
                                {% endwith %}
                                {% endwith %}
                            </div>
                            <div class="d-flex justify-content-between">
                                <small class="text-muted">剩余时间: {{ contract.end_date|timeuntil }}</small>
                                <small class="text-muted">已执行: {{ contract.start_date|timesince }}</small>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 合同双方信息 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-handshake me-2"></i>合同双方信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary mb-3">
                                    <i class="fas fa-building me-2"></i>我方信息
                                </h6>
                                <table class="table table-borderless table-sm">
                                    <tr>
                                        <td width="30%" class="text-muted">公司名称:</td>
                                        <td>{{ contract.our_company_name|default:"-" }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">公司地址:</td>
                                        <td>{{ contract.our_company_address|default:"-" }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">签约人:</td>
                                        <td>{{ contract.our_signatory|default:"-" }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">签约人职务:</td>
                                        <td>{{ contract.our_signatory_title|default:"-" }}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-info mb-3">
                                    <i class="fas fa-building me-2"></i>对方信息
                                </h6>
                                <table class="table table-borderless table-sm">
                                    <tr>
                                        <td width="30%" class="text-muted">公司名称:</td>
                                        <td>{{ contract.their_company_name|default:contract.supplier.name }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">公司地址:</td>
                                        <td>{{ contract.their_company_address|default:contract.supplier.address|default:"-" }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">签约人:</td>
                                        <td>{{ contract.their_signatory|default:contract.supplier.contact_person|default:"-" }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">签约人职务:</td>
                                        <td>{{ contract.their_signatory_title|default:"-" }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 合同条款摘要 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-file-alt me-2"></i>合同条款摘要
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if contract.main_subject %}
                        <div class="mb-3">
                            <h6 class="text-muted">
                                <i class="fas fa-cube me-2"></i>主要标的物:
                            </h6>
                            <p class="mb-0">{{ contract.main_subject }}</p>
                        </div>
                        {% endif %}
                        
                        {% if contract.delivery_requirements %}
                        <div class="mb-3">
                            <h6 class="text-muted">
                                <i class="fas fa-truck me-2"></i>交付要求:
                            </h6>
                            <p class="mb-0">{{ contract.delivery_requirements }}</p>
                        </div>
                        {% endif %}
                        
                        {% if contract.special_terms %}
                        <div class="mb-3">
                            <h6 class="text-muted">
                                <i class="fas fa-exclamation-triangle me-2"></i>特殊条款:
                            </h6>
                            <p class="mb-0">{{ contract.special_terms }}</p>
                        </div>
                        {% endif %}
                        
                        {% if contract.description %}
                        <div class="mb-3">
                            <h6 class="text-muted">
                                <i class="fas fa-info-circle me-2"></i>合同描述:
                            </h6>
                            <p class="mb-0">{{ contract.description }}</p>
                        </div>
                        {% endif %}
                        
                        {% if not contract.main_subject and not contract.delivery_requirements and not contract.special_terms and not contract.description %}
                        <div class="text-muted text-center py-3">
                            <i class="fas fa-file-alt fa-2x mb-2"></i>
                            <p class="mb-0">暂无合同条款信息</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 文件管理功能 -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-folder me-2"></i>合同文件管理
                        </h5>
                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#uploadFileModal">
                            <i class="fas fa-upload me-1"></i>上传文件
                        </button>
                    </div>
                    <div class="card-body">
                        {% if contract.files.all %}
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead class="table-light">
                                        <tr>
                                            <th>文件类型</th>
                                            <th>文件名称</th>
                                            <th>文件大小</th>
                                            <th>上传人</th>
                                            <th>上传时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for file in contract.files.all %}
                                        <tr>
                                            <td>
                                                {% if file.file_type == 'main' %}
                                                    <span class="badge bg-primary">
                                                        <i class="fas fa-file-contract me-1"></i>主合同
                                                    </span>
                                                {% elif file.file_type == 'attachment' %}
                                                    <span class="badge bg-info">
                                                        <i class="fas fa-paperclip me-1"></i>附件
                                                    </span>
                                                {% elif file.file_type == 'amendment' %}
                                                    <span class="badge bg-warning">
                                                        <i class="fas fa-edit me-1"></i>修订
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-secondary">
                                                        <i class="fas fa-file me-1"></i>其他
                                                    </span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-file me-2 text-muted"></i>
                                                    <div>
                                                        <strong>{{ file.file_name }}</strong>
                                                        {% if file.description %}
                                                            <br><small class="text-muted">{{ file.description|truncatechars:50 }}</small>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ file.file_size_mb }} MB</td>
                                            <td>
                                                {% if file.uploaded_by %}
                                                    <i class="fas fa-user me-1 text-info"></i>{{ file.uploaded_by.get_full_name|default:file.uploaded_by.username }}
                                                {% else %}
                                                    <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                            <td>{{ file.uploaded_at|date:"Y-m-d H:i" }}</td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <a href="{% url 'assets:contract_file_view' file.pk %}"
                                                       class="btn btn-outline-primary"
                                                       title="预览"
                                                       data-modal="iframe"
                                                       data-title="预览：{{ file.file_name }}">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ file.file_path.url }}" class="btn btn-outline-success" title="下载" download>
                                                        <i class="fas fa-download"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-outline-danger" title="删除" data-confirm="确定要删除文件 &quot;{{ file.file_name }}&quot; 吗？" data-post-url="{% url 'assets:contract_delete_file' file.pk %}">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% else %}
                            <div class="text-muted text-center py-4">
                                <i class="fas fa-folder-open fa-3x mb-3"></i>
                                <h6>暂无合同文件</h6>
                                <p class="mb-3">支持上传 PDF、DOC、DOCX 等格式文件</p>
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadFileModal">
                                    <i class="fas fa-upload me-2"></i>上传第一个文件
                                </button>
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 合同流程管理 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-tasks me-2"></i>合同流程管理
                        </h5>
                    </div>
                    <div class="card-body">
                        <!-- 当前状态显示 -->
                        <div class="mb-4">
                            <h6 class="text-muted mb-3">当前状态</h6>
                            <div class="d-flex align-items-center">
                                {% if contract.status == 'draft' %}
                                    <div class="badge bg-secondary fs-6 me-3">
                                        <i class="fas fa-edit me-2"></i>草稿状态
                                    </div>
                                    <button type="button" class="btn btn-primary btn-sm" onclick="submitForReview({{ contract.pk }})">
                                        <i class="fas fa-paper-plane me-1"></i>提交审核
                                    </button>
                                {% elif contract.status == 'active' %}
                                    <div class="badge bg-success fs-6 me-3">
                                        <i class="fas fa-check me-2"></i>合同生效中
                                    </div>
                                    <small class="text-muted">剩余 {{ contract.days_remaining }} 天到期</small>
                                {% elif contract.status == 'expired' %}
                                    <div class="badge bg-warning fs-6 me-3">
                                        <i class="fas fa-clock me-2"></i>合同已过期
                                    </div>
                                {% elif contract.status == 'terminated' %}
                                    <div class="badge bg-danger fs-6 me-3">
                                        <i class="fas fa-times me-2"></i>合同已终止
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- 审核记录展示区域 -->
                        {% if contract.reviews.all %}
                        <div class="mb-4">
                            <h6 class="text-muted mb-3">审核记录</h6>
                            <div class="timeline">
                                {% for review in contract.reviews.all %}
                                <div class="timeline-item mb-3">
                                    <div class="d-flex">
                                        <div class="timeline-marker me-3">
                                            {% if review.review_type == 'submit' %}
                                                <i class="fas fa-paper-plane text-primary"></i>
                                            {% elif review.review_type == 'approve' %}
                                                <i class="fas fa-check text-success"></i>
                                            {% elif review.review_type == 'reject' %}
                                                <i class="fas fa-times text-danger"></i>
                                            {% elif review.review_type == 'return' %}
                                                <i class="fas fa-undo text-warning"></i>
                                            {% endif %}
                                        </div>
                                        <div class="timeline-content flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div>
                                                    <h6 class="mb-1">{{ review.get_review_type_display }}</h6>
                                                    <p class="text-muted mb-1">{{ review.review_notes|default:"无备注" }}</p>
                                                    <small class="text-muted">
                                                        <i class="fas fa-user me-1"></i>{{ review.reviewer.get_full_name|default:review.reviewer.username }}
                                                        <i class="fas fa-clock ms-2 me-1"></i>{{ review.created_at|date:"Y-m-d H:i" }}
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 合同资产 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-cube me-2"></i>关联资产
                            {% if total_assets > 10 %}
                                <a href="{% url 'assets:asset_list' %}?contract={{ contract.pk }}" class="btn btn-outline-primary btn-sm float-end">
                                    查看全部 {{ total_assets }} 个资产
                                </a>
                            {% endif %}
                        </h5>
                    </div>
                    <div class="card-body">
                        {% if assets %}
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead class="table-light">
                                        <tr>
                                            <th>资产名称</th>
                                            <th>资产编号</th>
                                            <th>类别</th>
                                            <th>采购价格</th>
                                            <th>启用日期</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for asset in assets %}
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="fas fa-cube me-2 text-primary"></i>
                                                    <strong>{{ asset.name }}</strong>
                                                </div>
                                            </td>
                                            <td><code>{{ asset.asset_number }}</code></td>
                                            <td>
                                                {% if asset.category %}
                                                    <span class="badge bg-info">{{ asset.category.name }}</span>
                                                {% else %}
                                                    <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                            <td>¥{{ asset.purchase_price|floatformat:2 }}</td>
                                            <td>{{ asset.purchase_date|date:"Y-m-d" }}</td>
                                            <td>
                                                {% if asset.status == 'idle' %}
                                                    <span class="badge bg-secondary">闲置</span>
                                                {% elif asset.status == 'in_use' %}
                                                    <span class="badge bg-success">在用</span>
                                                {% elif asset.status == 'maintenance' %}
                                                    <span class="badge bg-warning">维修中</span>
                                                {% elif asset.status == 'scrapped' %}
                                                    <span class="badge bg-danger">已报废</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <a href="{% url 'assets:asset_detail' asset.pk %}" class="btn btn-outline-info btn-sm" title="查看资产详情">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% else %}
                            <div class="text-muted text-center py-3">
                                <i class="fas fa-cube fa-2x mb-2"></i>
                                <p class="mb-0">该合同暂无关联资产</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 统计信息 -->
            <div class="col-md-4">
                <!-- 合同状态卡片 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-pie me-2"></i>合同概览
                        </h5>
                    </div>
                    <div class="card-body text-center">
                        <div class="mb-3">
                            {% if contract.status == 'active' %}
                                <div class="alert alert-success">
                                    <i class="fas fa-file-contract fa-2x mb-2"></i>
                                    <h5>合同生效中</h5>
                                    <p class="mb-0">{{ contract.name }}</p>
                                </div>
                            {% elif contract.status == 'expired' %}
                                <div class="alert alert-warning">
                                    <i class="fas fa-file-contract fa-2x mb-2"></i>
                                    <h5>合同已过期</h5>
                                    <p class="mb-0">{{ contract.name }}</p>
                                </div>
                            {% elif contract.status == 'draft' %}
                                <div class="alert alert-secondary">
                                    <i class="fas fa-file-contract fa-2x mb-2"></i>
                                    <h5>合同草稿</h5>
                                    <p class="mb-0">{{ contract.name }}</p>
                                </div>
                            {% else %}
                                <div class="alert alert-danger">
                                    <i class="fas fa-file-contract fa-2x mb-2"></i>
                                    <h5>合同已终止</h5>
                                    <p class="mb-0">{{ contract.name }}</p>
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="row text-center">
                            <div class="col-6">
                                <h4 class="text-primary">{{ total_assets }}</h4>
                                <small class="text-muted">关联资产</small>
                            </div>
                            <div class="col-6">
                                <h4 class="text-success">¥{{ contract.amount|floatformat:0 }}</h4>
                                <small class="text-muted">合同金额</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 快速操作 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-bolt me-2"></i>快速操作
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="{% url 'assets:asset_create' %}" class="btn btn-success btn-sm">
                                <i class="fas fa-plus me-2"></i>添加资产
                            </a>
                            <a href="{% url 'assets:asset_list' %}?contract={{ contract.pk }}" class="btn btn-info btn-sm">
                                <i class="fas fa-cube me-2"></i>查看合同资产
                            </a>
                            <a href="{% url 'assets:supplier_detail' contract.supplier.pk %}" class="btn btn-warning btn-sm">
                                <i class="fas fa-truck me-2"></i>查看供应商
                            </a>
                            <a href="{% url 'assets:contract_list' %}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-file-contract me-2"></i>查看所有合同
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 合同进度 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-calendar-check me-2"></i>合同进度
                        </h5>
                    </div>
                    <div class="card-body">
                        {% with total_days=contract.start_date|timeuntil:contract.end_date %}
                        {% with elapsed_days=contract.start_date|timesince %}
                        {% if contract.status == 'active' %}
                            <div class="mb-2">
                                <small class="text-muted">合同执行进度</small>
                                <div class="progress">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">45%</div>
                                </div>
                            </div>
                        {% endif %}
                        {% endwith %}
                        {% endwith %}
                        
                        <table class="table table-borderless table-sm">
                            <tr>
                                <td class="text-muted">合同期限:</td>
                                <td>
                                    {% with days_diff=contract.end_date|timeuntil:contract.start_date %}
                                        {{ days_diff }}
                                    {% endwith %}
                                </td>
                            </tr>
                            {% if contract.status == 'active' %}
                            <tr>
                                <td class="text-muted">剩余时间:</td>
                                <td class="text-warning">
                                    {{ contract.end_date|timeuntil }}
                                </td>
                            </tr>
                            {% endif %}
                            <tr>
                                <td class="text-muted">执行天数:</td>
                                <td>
                                    {{ contract.start_date|timesince }}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                
                <!-- 统计信息 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-bar me-2"></i>统计信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-borderless table-sm">
                            <tr>
                                <td class="text-muted">合同ID:</td>
                                <td>
                                    <code>{{ contract.pk }}</code>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">关联资产:</td>
                                <td>
                                    <i class="fas fa-cube me-1 text-muted"></i>
                                    {{ total_assets }} 个
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">资产总值:</td>
                                <td>
                                    <i class="fas fa-dollar-sign me-1 text-muted"></i>
                                    ¥{{ total_asset_value|floatformat:2 }}
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">合同金额:</td>
                                <td>
                                    <i class="fas fa-file-invoice-dollar me-1 text-muted"></i>
                                    ¥{{ contract.amount|floatformat:2 }}
                                </td>
                            </tr>
                            <tr>
                                <td class="text-muted">创建时间:</td>
                                <td>
                                    <i class="fas fa-calendar me-1 text-muted"></i>
                                    {{ contract.created_at|date:"Y-m-d" }}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 文件上传模态框 -->
<div class="modal fade" id="uploadFileModal" tabindex="-1" aria-labelledby="uploadFileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadFileModalLabel">
                    <i class="fas fa-upload me-2"></i>上传合同文件
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <form id="uploadFileForm" method="post" enctype="multipart/form-data">
                <div class="modal-body">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="file_type" class="form-label">文件类型</label>
                        <select class="form-select" id="file_type" name="file_type" required>
                            <option value="">请选择文件类型</option>
                            <option value="main">主合同文件</option>
                            <option value="attachment">合同附件</option>
                            <option value="amendment">合同修订</option>
                            <option value="other">其他文件</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="file_name" class="form-label">文件名称</label>
                        <input type="text" class="form-control" id="file_name" name="file_name" placeholder="请输入文件名称" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="file_path" class="form-label">选择文件</label>
                        <div class="file-upload-area border-2 border-dashed rounded p-4 text-center" id="fileUploadArea">
                            <input type="file" class="form-control d-none" id="file_path" name="file" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png" required>
                            <div class="file-upload-content">
                                <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                <h6>点击选择文件或拖拽文件到此处</h6>
                                <p class="text-muted mb-0">支持 PDF、DOC、DOCX、XLS、XLSX、JPG、PNG 格式，最大 50MB</p>
                            </div>
                            <div class="file-info d-none">
                                <i class="fas fa-file fa-2x text-primary mb-2"></i>
                                <p class="file-name mb-1"></p>
                                <p class="file-size text-muted mb-0"></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">文件描述</label>
                        <textarea class="form-control" id="description" name="description" rows="3" placeholder="请输入文件描述（可选）"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-upload me-1"></i>上传文件
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 提交审核确认模态框 -->
<div class="modal fade" id="submitReviewModal" tabindex="-1" aria-labelledby="submitReviewModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="submitReviewModalLabel">
                    <i class="fas fa-paper-plane me-2"></i>提交审核确认
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    确定要提交合同 <strong>{{ contract.name }}</strong> 进行审核吗？
                </div>
                <div class="mb-3">
                    <label for="submit_notes" class="form-label">提交说明</label>
                    <textarea class="form-control" id="submit_notes" rows="3" placeholder="请输入提交说明（可选）"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="confirmSubmitReview()">
                    <i class="fas fa-paper-plane me-1"></i>确认提交
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// 文件上传相关功能
document.addEventListener('DOMContentLoaded', function() {
    const fileUploadArea = document.getElementById('fileUploadArea');
    const fileInput = document.getElementById('file_path');
    const fileNameInput = document.getElementById('file_name');
    const uploadContent = fileUploadArea.querySelector('.file-upload-content');
    const fileInfo = fileUploadArea.querySelector('.file-info');
    
    // 点击上传区域选择文件
    fileUploadArea.addEventListener('click', function() {
        fileInput.click();
    });
    
    // 文件选择处理
    fileInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            showFileInfo(file);
            // 自动填充文件名
            if (!fileNameInput.value) {
                fileNameInput.value = file.name.split('.')[0];
            }
        }
    });
    
    // 拖拽上传功能
    fileUploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('border-primary');
    });
    
    fileUploadArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        this.classList.remove('border-primary');
    });
    
    fileUploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('border-primary');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            showFileInfo(files[0]);
            if (!fileNameInput.value) {
                fileNameInput.value = files[0].name.split('.')[0];
            }
        }
    });
    
    function showFileInfo(file) {
        const fileName = fileInfo.querySelector('.file-name');
        const fileSize = fileInfo.querySelector('.file-size');
        
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        
        uploadContent.classList.add('d-none');
        fileInfo.classList.remove('d-none');
    }
    
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    // 表单提交处理
    document.getElementById('uploadFileForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>上传中...';
        
        fetch(`/contracts/{{ contract.pk }}/upload-file/`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('上传失败: ' + (data.error || '未知错误'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('上传失败，请重试');
        })
        .finally(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        });
    });
});

// 提交审核功能
function submitForReview(contractId) {
    const modal = new bootstrap.Modal(document.getElementById('submitReviewModal'));
    modal.show();
}

function confirmSubmitReview() {
    const notes = document.getElementById('submit_notes').value;
    
    fetch(`/contracts/{{ contract.pk }}/submit-review/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            review_notes: notes
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('提交失败: ' + (data.error || '未知错误'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('提交失败，请重试');
    });
}

// 打印合同功能
function printContract(contractId) {
    window.open(`/contracts/${contractId}/print/`, '_blank');
}
</script>

<style>
.file-upload-area {
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-upload-area:hover {
    border-color: #0d6efd !important;
    background-color: #f8f9fa;
}

.file-upload-area.border-primary {
    border-color: #0d6efd !important;
    background-color: #e7f3ff;
}

.timeline-item {
    position: relative;
}

.timeline-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #dee2e6;
}

.timeline-content {
    padding: 8px 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #dee2e6;
}
</style>
{% endblock %}